<template>
    <div id="announcementUploadPage">
        <!-- 公告上传部分 -->
        <div id="announcementUpload">
            <el-form :model="announcementUpload" :rules="fromRules" ref="form">
                <el-form-item prop="theme">
                    <div>
                        主题
                        <el-input v-model="announcementUpload.theme" type="input" placeholder="请输入公告主题"
                            clearable></el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="content">
                    <div>
                        内容
                        <el-input v-model="announcementUpload.content" type="textarea" placeholder="请输入公告内容"
                            autosize></el-input>
                    </div>
                </el-form-item>
            </el-form>
            <el-button @click="addAnnouncement" type="success">提交</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            announcementUpload: {
                theme: '',
                content: '',
            },
            fromRules: {
                theme: [
                    { required: true, message: '请输入公告主题', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入公告内容', trigger: 'blur' },
                ],
            }, // 表单规则
        }
    },
    methods: {
        // 添加公告
        addAnnouncement() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // 准备数据
                    let data = new FormData()
                    data.append('theme', this.announcementUpload.theme)
                    data.append('content', this.announcementUpload.content)
                    this.$axios({
                        method: 'post',
                        url: '/announcement/login/addAnnouncement',
                        data: data,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).then(res => {
                        if (res.data) {
                            this.$message({
                                message: '提交成功',
                                type: 'success',
                                showClose: true,
                            })
                        } else {
                            this.$message({
                                message: '提交失败！出现错误了X.X',
                                type: 'error',
                                showClose: true,
                            })
                        }
                    })
                } else {
                    this.$message({
                        message: '请完善内容再提交',
                        type: 'error',
                        showClose: true,
                    })
                }
            })

        },
    }
}
</script>

<style lang="scss" scoped>
#announcementUpload {
    display: flex;
    flex-direction: column;
    padding: 20px;
}
</style>
<style scoped="scope" scope>
/* 搜索Bar 上传Bar */
.search {
    background-color: #202020;
    color: #fff;
}

/deep/#searchBar .el-input__inner,
/deep/#announcementUpload .el-input__inner,
/deep/#announcementUpload .el-textarea__inner {
    background-color: #202020;
    color: #fff;
    text-align: center;
}

/deep/#announcementUpload .el-input__inner {
    width: 300px;
}

/deep/.el-textarea__inner {
    min-height: 60px !important;
}

#searchBar .el-input,
#searchBar .el-select {
    margin: 0 20px;
}
</style>